// @ts-ignore
import {createStyles} from 'antd-style';
import React from 'react';
import ReactDOM from 'react-dom';
import { Pie } from '@ant-design/plots';
import { Line } from '@ant-design/charts';
import {PageContainer} from "@ant-design/pro-components";
const useStyles = createStyles(({token}) => {
  return {
    action: {
      marginLeft: '8px',
      color: 'rgba(0, 0, 0, 0.2)',
      fontSize: '24px',
      verticalAlign: 'middle',
      cursor: 'pointer',
      transition: 'color 0.3s',
      '&:hover': {
        color: token.colorPrimaryActive,
      },
    },
    lang: {
      width: 42,
      height: 42,
      lineHeight: '42px',
      position: 'fixed',
      right: 16,
      borderRadius: token.borderRadius,
      ':hover': {
        backgroundColor: token.colorBgTextHover,
      },
    },
    container: {
      display: 'flex',
      flexDirection: 'column',
      height: '100vh',
      overflow: 'auto',
    },
  };
});

const data = [
  { day: '2024.3.2', value: 20 },
  { day: '2024.3.3', value: 24 },
  { day: '2024.3.4', value: 15 },
  { day: '2024.3.5', value: 25 },
  { day: '2024.3.6', value: 36 },
  { day: '2024.3.7', value: 28 },
  { day: '2024.3.8', value: 11 },
];

const config1 = {
  data,
  height: 300,
  width: 800,
  xField: 'day',
  yField: 'value',
};
const config2 = {
  data: [
    { type: '今日提交通过', value: 27 },
    { type: '今日提交未通过', value: 84 },

  ],
  angleField: 'value',
  colorField: 'type',
  label: {
    text: 'value',
    style: {
      fontWeight: 'bold',
    },
  },
  legend: {
    color: {
      title: false,
      position: 'right',
      rowPadding: 5,
    },
  },
};
const DataShow: React.FC = () => {
  const {styles} = useStyles();
  return (
    <PageContainer>
      <span>近7天提交人数展示</span>
      <Line {...config1} />
      <span>近7天提交通过率展示</span>
      <Pie {...config2} />
    </PageContainer>

  );

};
export default DataShow;
